<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title></title>
	<link rel="stylesheet" type="text/css" href="./libs/citydata/css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="./libs/citydata/css/mui.indexedlist.css" />
	<link rel="stylesheet" type="text/css" href="./libs/citydata/css/index.css" />
	<link rel="stylesheet" type="text/css" href="./mo_bmapaddress.css" />
	<style>
		#search-input {
			text-align: left;
		}

		.cid_active {
			background-color: #FE8702 !important;
			color: #fff !important;
		}
	</style>
</head>

<body>
	<header class="bmap-city-header" style="position:relative">
		<a class="bmap-city-header_left bmap-city-header-span" tapmode onclick="api.closeWin();"><img class="headrighticon" src="./image/left.png" /></a>
		<div class="bmap-city-header-title">选择城市</div>
	</header>
	<!--地址html压缩-->
	<div class="bMapaddress_citylist " id="bMapaddress_citylist" style="display: block;">
		<div class="mui-content" id="page" v-cloak>
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search" style="display: none">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="输入城名查询或首字母查询，例：北京，B" style="background: none;" />
				</div>
				<div class="mui-indexed-list-bar" style="height:100%">
					<a class="eword">&nbsp;</a>
					<a class="eword">热</a>
					<a class="eword" v-for="item in listData.pdata">{{item}}</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<div id="allcity" style="height:0;width:0"></div>
					<ul class="mui-table-view" style="padding-bottom:10px" id="place_list">
						<li data-group="DANG" class="mui-table-view-divider mui-indexed-list-group" v-if="locCity != ''">您的当前城市</li>
						<li data-value="DANG" data-tags="A" class="mui-table-view-cell mui-indexed-list-item" onclick="sureCity($(this))" v-if="locCity != ''">{{locCity}}</li>
						<li data-group="热" class="mui-table-view-divider mui-indexed-list-group">热门城市</li>
						<li data-value="热" data-tags="A" class="mui-table-view-cell mui-indexed-list-item" onclick="sureCity($(this))" v-for="item in listData.hostData">{{item}}</li>
						<div v-for="citylist in listData.citydata" style="width:100%;">
							<li :data-group="citylist.pinyin" class="mui-table-view-divider mui-indexed-list-group">{{citylist.pinyin}}</li>
							<li :data-value="citylist.pinyin" :data-tags="citylist.pinyin" class="mui-table-view-cell mui-indexed-list-item cidls" onclick="sureCity($(this))" v-for="item in citylist.children" style="float:left" v-bind:id="'cid'+item.id">{{item.name}}</li>
						</div>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!--地址html压缩-->
</body>
<script type="text/javascript" src="./libs/api.js"></script>
<script type="text/javascript" src="./libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./libs/vue.min.js"></script>
<script type="text/javascript" src="./libs/citydata/js/mui.js"></script>
<script type="text/javascript" src="./libs/citydata/js/mui.indexedlist.js"></script>
<script type="text/javascript" src="./mo_bmapaddress.js"></script>
<script>
	var vue = new Vue({
		el: '#page',
		data: {
			locCity: '', //当前城市
			listData: [],
			isShow: 0,
			inputId: ''
		}
	});
	var bMap;
	apiready = function() {
		var header = document.querySelector('header');
		if (header) {
			$api.fixStatusBar(header);
		}
		bMap = api.require('bMap');
		getLocCity();
		getcitylist();
	};


	function getcitylist() {
		vue.listData = bmapCityData; //城市数据
		setTimeout(function() {
			mui.init();
			mui.ready(function() {
				var list = document.getElementById('list');
				list.style.height = (api.winHeight - 50 - api.safeArea.top) + 'px';
				window.indexedList = new mui.IndexedList(list);
				$('.mui-placeholder').css({
					'z-index': '-1'
				});
			});
		}, 100)
	}

	function getLocCity() {
		bMap.getLocation({
			accuracy: '10m',
			autoStop: true,
			filter: 1
		}, function(ret, err) {
			if (ret.status) {
				// console.log(JSON.stringify(ret));
				bMap.getNameFromCoords({
					lon: ret.lon,
					lat: ret.lat
				}, function(ret, err) {
					if (ret.status) {
						// console.log(JSON.stringify(ret));
						vue.locCity = ret.city;
					}
				});
			}
		});
	}

	function sureCity(obj) {
		var city = obj.text();
		api.sendEvent({
			name: 'choosemapCity',
			extra: {
				city: city
			}
		});
		api.closeWin();
	}
</script>

</html>
